<template>
	<view class="zkLstWrap">
		<view class="zkLstItem" v-for="(item,key) in lstData" :key="key" @click="goToStep(item.url)">
			<text class="zkLstIcon iconfont" :class="item.icon"></text>
			<view class="zkLstItemR">
				<view class="zkLstTop">
					<view class="zkLstTitle">{{item.title}}</view>
					<view class="zkLstTime">{{item.time}}</view>
				</view>
				<view class="zkLstDetail">{{item.detail}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'zkLst',
	props:{
		lstData:{
			required:true
		}
	},
	components: {
	},
	data() {
		return {
		}
	},
	methods: {
		goToStep(url){
			if(url)
			uni.navigateTo({
				url,
				animationType: 'pop-in',
				animationDuration: 200
			})
		}
	},
	onReady(){
	    
	},
	onNavigationBarButtonTap(e) {
		console.log(e)
	}
};
</script>

<style scoped lang="scss">
.zkLstWrap{
	.zkLstItem{
		display: flex;
		align-items: center;
		padding:20.83rpx 31.25rpx;
		border-bottom: 1px solid #eeeeee;
		.zkLstIcon{
			color:$themeColor;
			font-size: 83.33rpx;
			margin-right: 20.83rpx;
		}
		.zkLstItemR{
			flex: 1;
		}
	}
}
.zkLstTop{
	display: flex;
	justify-content: space-between;
	align-items: center;
	.zkLstTitle{
		font-size:33.33rpx;
	}
	.zkLstTime{
		color:#AAAAAA;
	}
}
.zkLstDetail{
	color:#AAAAAA;
	margin-top: 10.41rpx;
}
</style>
